<style>
  input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
  input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
</style>

<form class="m-2" novalidate [formGroup]="formGroup" (ngSubmit)="submitForm()">

  <div class="bg-danger text-white p-2 mb-2" 
          *ngIf="formSubmitted && formGroup.invalid">
      There are problems with the form
      <ul>
          <li *ngFor="let error of formGroup.getFormValidationMessages()">
              {{error}}
          </li>
      </ul>
  </div>

  <div class="form-group" *ngFor="let control of formGroup.productControls">
      <label>{{control.label}}</label>
      <input class="form-control" 
          name="{{control.modelProperty}}"
          formControlName="{{control.modelProperty}}" />
      <ul class="text-danger list-unstyled"
              *ngIf="(formSubmitted || control.dirty) && control.invalid">
          <li *ngFor="let error of control.getValidationMessages()">
              {{error}}
          </li>
      </ul>
  </div>

  <button class="btn btn-primary" type="submit"
      [disabled]="formSubmitted && formGroup.invalid"
      [class.btn-secondary]="formSubmitted && formGroup.invalid">
          Create
  </button>
</form>
